<div class="card-header">
  <filter-list
    request="request"
    callback="loadProducts(pageIndex)"
  ></filter-list>
</div>
<div class="card-body">
  <table class="table table-hover" cellspacing="0">
    <thead class="thead-light">
      <tr>
        <th scope="col" style="width: 3%">
          <small
            class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
          ></small>
        </th>
        <th scope="col" style="width: 4%">
          <span
            class="fa fa-grip-vertical fa-xs text-black-50-numeric-down"
          ></span>
        </th>
        <th scope="col" style="width: 5%">Code</th>
        <th scope="col" style="width: 25%">Title</th>
        <th scope="col" width="10%">Image</th>
        <th scope="col" width="10%">Created Date</th>
        <th scope="col" style="width: 10%">Author</th>

        <th scope="col" style="width: 5%"></th>
      </tr>
    </thead>

    <tbody class="sortable" ng-init="loadProducts()">
      <tr
        ng-repeat="item in data.items track by $index"
        class="sortable-item"
        sort-model="product"
        sort-model-id="{{item.id}}"
      >
        <td style="cursor: grab" class="drag-header">
          <small
            class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
          ></small>
        </td>
        <td>
          <input
            type="text"
            value="{{item.priority}}"
            class="item-priority form-control form-control-sm d-inline"
            style="width: 40px"
          />
        </td>
        <td>{{item.code}}</td>
        <td>{{item.title}}</td>
        <td>
          <div ng-if="item.image!=''">
            <img height="50" ng-src="{{item.imageUrl}}" />
          </div>
          <small> {{item.excerpt}} </small>
        </td>
        <td>
          <small>
            {{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
          </small>
        </td>
        <td>{{item.createdBy}}</td>

        <td>
          <div
            class="btn-group btn-group-sm btn-group-sm float-end"
            role="group"
            aria-label="Actions"
          >
            <a href="/admin/product/details/{{item.id}}" class="btn btn-link">
              <span class="fas fa-pen text-primary"></span>
            </a>
            <a href="{{item.detailsUrl}}" target="_blank" class="btn btn-link">
              <span class="fas fa-eye text-info"></span>
            </a>

            <button
              type="button"
              class="btn btn-link del-popover"
              ng-click="removeProduct(item.id)"
            >
              <span class="fas fa-trash-alt text-danger"></span>
            </button>
            <div class="popover-body d-none">
              <a
                href="/{{currentLanguage}}/portal/products/delete/{{item.id}}"
                class="btn btn btn-danger"
                >Yes, I want to delete!</a
              >
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="card-footer">
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-end">
      <li class="page-item">
        <a
          class="page-link active"
          href="javascript:void(0)"
          ng-click="loadProducts(data.pageIndex-1)"
          ng-hide="data.pageIndex==0"
          >Prev</a
        >
      </li>
      <li
        class="page-item"
        ng-class="{active: n-1==data.pageIndex}"
        ng-repeat="n in range(data.totalPage)"
      >
        <a
          class="page-link"
          href="javascript:void(0)"
          ng-click="loadProducts(n-1)"
          >{{n}}</a
        >
      </li>
      <li class="page-item">
        <a
          class="page-link"
          href="javascript:void(0)"
          ng-click="loadProducts(data.page)"
          ng-hide="data.pageIndex >= (data.totalPage-1)"
          >Next</a
        >
      </li>
    </ul>
  </nav>
</div>
<!-- <section class="content container-fluid"> -->

<!-- </section> -->
